JS30

• Day 02 JS&CSS clock
• Web dev 了解eventListener
  • event bubbling 後
  • event capturing 先
    • x.addEventLister('click', e=>{}, {capture: true})
  • e.stopPropagation()
  • 第三個參數
    • capture
    • once: true run1次就把自己刪掉
  • removeEventListener 記得要額外把function命名，才會是同一個function
  • delegation

    function addGlobalEventListener(type, selector, callback){
        document.addEventListener(type, e=> {
            if(e.target.matches(selector), callback(e)
        })
    }

• Web dev 了解TouchEvent
  • touchstart, touchmove, touchend
    • touch event包含三重點
      • touches []
      • targetTouches
      • changeTouches
    • e.preventDefault() 取消了zoom, reload 手勢 及 click事件

前端(React)

• 鐵人賽
  • 從 Hooks 開始，讓你的網頁 React 起來 03-08 // 寫得好讚收穫良多!
    • 從Vanilla JS 開始理解React hook做了甚麼是
    • 改成JSX
      • class -> className
    • useState
      • const {useState}物件 = React
      • const [count, setCount]陣列 = useState(初始值)
      • 條件渲染
        • || 前面為假時拿後面的那個
        • && 前面為真時拿後面的那個
      • 搭配迴圈

後端

• 影片：成為看起來很強的後端 11-16
  • Token類型, Hash, Encode, Encrypt差異
  • 權限驗證
    • API key: Server to server
      • 在http header 自製加入 X-Api-Key:admit
    • 多用戶管理模式/ client to server HTTP Basic Authentication
      • 在httper header標準 Autheriozation: Basic TOKEN(static)
        • BASE64(username:password)
        • Challenge! 彈跳視窗
• php 基礎語法 by Progress Bar 進度條線上課程

資安/其他

嘗試參與PICOCTF 2022

閱讀

<區塊鏈社會學>
- 價格反映的是稀缺性而非價值; 升值空間,生產能力的'潛力'
- 畢卡索：Art is a lie to make us realize truth
- 習而學習之，邊做邊學